<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="true"
		:auto="false" :hideEmptyView="false">
		<view slot="top">
			<z-nav-bar backState="1000" >用户评价</z-nav-bar>
			<view class="u-p-30 u-flex bg-white" v-if="currentSku">
				<view class="u-flex-3">
					<image :src="currentSku.coverImage" style="width: 200rpx;height: 200rpx;"></image>
				</view>
				<view class="u-flex-9 u-m-l-30">
					<view>
						<text class="u-font-32 text-bold">{{currentSku.skuShortName}}</text>
					</view>
					<!-- <view class="u-flex u-m-t-10">
						<view class="tag u-m-r-10" v-for="(item, index) in 2" :key="index">
							<text class="u-font-20">24H发货</text>
						</view>
					</view> -->
					<view class="u-m-t-30">
						<text class="text-bold u-font-22 text-orange">￥</text>
						<text class="text-bold u-font-32 text-orange">{{currentSku.sellPrice | formatMoneyToYuanFilter}}</text>
						<!-- <text style="opacity: 0.5;" class="u-font-22">/份</text> -->
					</view>
				</view>
			</view>
		</view>
		
		<view class="u-m-t-20 bg-white u-p-l-40 u-p-r-40 u-p-t-30 u-p-b-30" v-for="(item, index) in dataList" :key="index">
			<view class="u-flex">
				<view class="u-flex-2 u-row-center u-flex">
					<u-avatar :src="item.headerUrl" size="30"></u-avatar>
				</view>
				<view class="u-flex-7">
					<view>
						<text class="u-font-26 text-bold">{{formatNickName(item.nickName)}}</text>
					</view>
					<view class="u-m-t-4">
						<u-rate count="5" v-model="item.goodsScore" gutter="1" readonly activeColor="#FBA808" size="14"></u-rate>
					</view>
				</view>
				<view class="u-flex-3 u-flex u-flex-end">
					<text style="opacity: 0.5;" class="u-font-22">{{formatOrderCommentDate(item.createTime)}}</text>
				</view>
			</view>
			<view class="u-flex u-m-t-20">
				<view class="u-flex-2">
				</view>
				<view class="u-flex-10" v-if="item.userFirstComment">
					<text class="u-font-24" style="opacity: 0.8;">{{item.userFirstComment.content}}</text>
				</view>
			</view>
			<view class="u-flex u-m-t-10">
				<view class="u-flex-2">
				</view>
				<view class="u-flex-10 u-flex" v-if="item.commentImageList">
					<view class="u-m-r-10" v-for="(image, index) in item.commentImageList" :key="index" @click="handlePreviewImage(index,item)">
						<image :src="image" style="width: 120rpx;height: 120rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		
		
	</z-paging>
</template>

<script>
	import {getOrderCommentPage} from '@/api/order_comment.js'
	import dayjs from 'dayjs'
	import { handleName } from '@/common/util.js'
	
	export default{
		data(){
			return {
				dataList:[],
				src:'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0409%2F88e0fe9cj00rsuiw5002ud200u000u0g00990099.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
				value:5,
				
				spuId:'',
				currentSku:null
			}
		},
		onLoad(e) {
			this.spuId = e.spuId
			this.currentSku = JSON.parse(decodeURIComponent(e.currentSku))
			console.log(this.currentSku)
			this.init()
		},
		methods:{
			/**
			 * 初始化
			 */
			init(){
				this.reload()
			},
			
			/**
			 * 重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			/**
			 * 查询
			 */
			queryList(pageNo, pageSize){
				// 获取评论
				getOrderCommentPage({
					spuId: this.spuId,
					current: pageNo,
					size: pageSize
				}).then(result=>{
					let data = result.data.records
					this.formatOrderComment(data)
					this.dataList = this.dataList.concat(data);
					this.$refs.paging.complete(data)
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false);
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			
			/**
			 * 格式化数据
			 */
			formatOrderComment(data){
				data.forEach(item=>{
					if(item.headerUrl){
						item.headerUrl = item.headerUrl
					}
					if(item.userFirstComment.commentImages){
						let images = item.userFirstComment.commentImages.split(',')
						// 获取评论图
						this.$set(item, 'commentImageList', images)
					} else {
						this.$set(item, 'commentImageList', [])
					}
				})
			},
			
			/**
			 * 名字脱敏
			 */
			formatNickName(val){
				return handleName(val)
			},
			
			/**
			 * 格式化评论时间
			 */
			formatOrderCommentDate(val){
				return dayjs(val).format('YYYY.MM.DD')
			},
			
			/**
			 * 图片预览
			 */
			handlePreviewImage(index, item){
				debugger
				uni.previewImage({
					current: index,     // 当前显示图片的索引值
					urls: item.commentImageList,    // 需要预览的图片列表，photoList要求必须是数组
					loop:true,          // 是否可循环预览
				})
			}
			
		}
	}
</script>

<style scoped>
	.tag{
		border: 1rpx solid #F55726;
		color: #F55726;
		padding: 2rpx 10rpx;
		border-radius: 16rpx;
	}
</style>